<template>
  <div :style="styles" class="absolute model" @click="onTag(codes)" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
    <span class="btn">{{ label }} </span>
  </div>
  <div
    class="absolute border"
    :style="{
      left: props.styles.left,
      top: props.styles.top,
      height: props.styles.height,
      width: countNum,
    }"
  ></div>
</template>
<script setup name="model">
import { ref } from "vue";
import { userStore } from "@/store/modules/userStore";
import { message, Modal } from "ant-design-vue";
import { cloneDeep } from "lodash";

const store = userStore();

const props = defineProps({
  styles: {
    type: Object,
    required: false,
    default: () => ({}),
  },
  codes: {
    type: Array,
    required: false,
    default: () => [],
  },
  label: {
    type: String,
    required: false,
    default: "",
  },
  count: {
    type: Number,
    required: false,
    default: 0,
  },
});

function onTag(nodes) {
  Modal.confirm({
    content: "确定要执行该模式吗？",
    onOk() {
      const nodeReflect = cloneDeep(nodes).map((v) => {
        v.value = v.value === 0 ? 2 : 0;
        return v;
      });
      console.log("-------确定要执行该模式吗？------", nodeReflect);
      store.changeModelOperateList(nodeReflect);
      message.success("模拟操作执行成功");
    },
    onCancel() {},
  });
}

const countNum = ref("0px");

function onMouseenter() {
  countNum.value = (props.count || 0) * 20 + "px";
}
function onMouseleave() {
  countNum.value = "0px";
}
</script>
<style scoped lang="less">
.model {
  background-color: #fff;
  z-index: 10;
  color: #026828;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.border {
  z-index: 1;
  border: 2px solid #009f02;
}
</style>
